<!-- TableView14_14.vue 树形数据的固定表头表格 -->
<template>
  <div class="table-demo">
    <h2>14. 添加表头固定功能,树形数据的固定表头表格</h2>
    <p class="description">展示具有层级关系的数据</p>
    
    <!-- 添加调试信息 -->
    <div class="debug-info">
      <p>总数据条数: {{ allDepartments.length }}</p>
      <p>当前显示条数: {{ departments.length }}</p>
      <p>展开的节点: {{ expandedKeys }}</p>
    </div>
    
    <div class="table-container">
      <Table
        :data="departments"
        :columns="columns"
        fixed-header
        fixed-header-height="300px"
        border
        :expanded-keys="expandedKeys"
        @expand="handleExpand"
      >
        <template #cell-name="{ row }">
          <span 
            :style="{ 
              paddingLeft: `${row._level * 20}px`,
              display: 'inline-block'
            }"
          >
            <!-- 添加更多调试信息 -->
            [L{{ row._level }}/ID{{ row.id }}] {{ row.name }}
          </span>
        </template>
        <template #cell-expand="{ row }">
          <button 
            v-if="row.hasChildren"
            class="expand-button"
            @click.stop="handleExpand(row)"
            :title="`ID: ${row.id}`"
          >
            {{ expandedKeys.includes(row.id) ? '−' : '+' }}
          </button>
          <span v-else>&nbsp;</span>  <!-- 添加占位符保持对齐 -->
        </template>
      </Table>
    </div>
    
    <!-- 添加原始数据显示，用于调试 -->
    <div class="debug-data">
      <h3>原始数据:</h3>
      <pre>{{ JSON.stringify(departments, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue'
import Table from '@/components/Table/Table.vue'

// 将树形数据扁平化处理
const flattenDepartments = (items, parent = null, level = 0) => {
  let result = []
  items.forEach(item => {
    const flatItem = {
      id: item.id,
      name: item.name,
      manager: item.manager,
      memberCount: item.memberCount,
      _level: level,
      _parentId: parent ? parent.id : null,
      hasChildren: item.children?.length > 0
    }
    result.push(flatItem)
    
    if (item.children?.length) {
      result = result.concat(flattenDepartments(item.children, item, level + 1))
    }
  })
  return result
}

const originalData = [
  {
    id: 1,
    name: '技术部',
    manager: '张三',
    memberCount: 150,
    children: [
      {
        id: 11,
        name: '前端组',
        manager: '李四',
        memberCount: 45,
        children: [
          {
            id: 111,
            name: 'Vue小组',
            manager: '王五',
            memberCount: 15
          },
          {
            id: 112,
            name: 'React小组',
            manager: '赵六',
            memberCount: 12
          }
        ]
      },
      {
        id: 12,
        name: '后端组',
        manager: '钱七',
        memberCount: 55,
        children: [
          {
            id: 121,
            name: 'Java小组',
            manager: '孙八',
            memberCount: 20
          },
          {
            id: 122,
            name: 'Python小组',
            manager: '周九',
            memberCount: 18
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '产品部',
    manager: '吴十',
    memberCount: 80,
    children: [
      {
        id: 21,
        name: '设计组',
        manager: '郑十一',
        memberCount: 25
      },
      {
        id: 22,
        name: '运营组',
        manager: '王十二',
        memberCount: 35
      }
    ]
  }
]

const allDepartments = ref(flattenDepartments(originalData))
const expandedKeys = ref([])

// 根据展开状态过滤显示的数据
const departments = computed(() => {
  console.log('展开的keys:', expandedKeys.value)
  return allDepartments.value.filter(item => {
    if (item._level === 0) {
      console.log('根节点:', item)
      return true
    }
    
    // 检查父节点是否展开
    let currentId = item._parentId
    while (currentId) {
      if (!expandedKeys.value.includes(currentId)) {
        return false
      }
      const parent = allDepartments.value.find(p => p.id === currentId)
      if (!parent) break
      currentId = parent._parentId
    }
    return true
  })
})

const columns = ref([
  { 
    title: '', 
    dataIndex: 'expand', 
    width: '50px',
    fixed: 'left',
    customCell: true 
  },
  { title: '部门名称', dataIndex: 'name', width: '200px' },
  { title: '负责人', dataIndex: 'manager', width: '120px' },
  { title: '成员数', dataIndex: 'memberCount', width: '100px' }
])

const handleExpand = (row) => {
  console.log('展开/折叠行:', row)
  const index = expandedKeys.value.indexOf(row.id)
  if (index > -1) {
    expandedKeys.value.splice(index, 1)
  } else {
    expandedKeys.value.push(row.id)
  }
  // 强制更新
  expandedKeys.value = [...expandedKeys.value]
}

// 添加调试代码
watchEffect(() => {
  console.log('当前显示的数据:', departments.value)
})
</script>

<style scoped>
.table-demo {
  padding: 20px;
}

.description {
  margin: 16px 0;
  color: #666;
}

.table-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
  height: 400px;
}

:deep(.body-container) {
  padding-top: 41px;
}

:deep(.fixed-header-container) {
  background: white;
  z-index: 10;
}

.body-container {
  position: relative;
  background: white;
  flex: 1;
  overflow: auto;
}

:deep(.header-table) {
  background: white;
  width: 100%;
  table-layout: fixed;
}

:deep(.header-table th) {
  background: white;
  position: sticky;
  top: 0;
}

:deep(.body-table) {
  width: 100%;
  table-layout: fixed;
}

tr {
  background: white;
}

td {
  position: relative;
  z-index: 1;
}

.expand-button {
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.expand-button:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.debug-info {
  margin: 10px 0;
  padding: 10px;
  background: #f8f8f8;
  border: 1px solid #ddd;
}

.debug-data {
  margin-top: 20px;
  padding: 10px;
  background: #f8f8f8;
  border: 1px solid #ddd;
  max-height: 300px;
  overflow: auto;
}

pre {
  margin: 0;
  white-space: pre-wrap;
}
</style>
